<template>
    <div>
        {{log("render")}}
        {{ now }}
        <button @click="start = !start">{{start ? "停止":"开始"}} </button>
    </div>
</template>
<script>
import moment from 'moment';
export default {
    data(){
        console.log("data");
        this.moment = moment;
        this.log = window.console.log;
        return {
            now : moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
            start:false
        }
    },
    watch:{
        start(){
            this.startClock();
        }
    },
    beforeCreate(){
        console.log("beforeCreated");
    },
    created(){
        console.log("created");
    },
    beforeMount(){
        console.log("beforeMounted");
    },
    mounted(){
        console.log("mounted");
        this.startClock();
    },
    beforeUpdate(){
        console.log("beforeUpdate");
    },
    update(){
        console.log("updated");
    },
    beforeDestroy(){
        console.log("beforeDestroy");
        clearInterval(this.clockInterval);
    },
    destroy(){
        console.log("destroy");
    },
    methods:{
        startClock:function(){
            clearInterval(this.clockInterval);
            if(this.start){
                this.clockInterval = setInterval(()=>{
                    this.now = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                },1000)
            }
        }
    }

}
</script>
